<template>
	<view class="cu-form-group" style="border-radius: 10px;position: absolute;right: 0rpx;">
		<uni-data-picker ellipsis placeholder="" :map="{text:'title',value:'id'}" popup-title="请选择部门"
			v-if="!deptLoading" :localdata="dataTree" v-model="classes" @change="onchange" @nodeclick="onnodeclick"
			@popupopened="onpopupopened" @popupclosed="onpopupclosed" @clear="clear">
		</uni-data-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classes: '',
				selectIds: [],
				dataTree: [],
				selectDeptObj: {
					post: '',
					workshop: '',
					classes: '',
					freightBasis: '',
					classification: '',
				},
				deptLoading: false

			}
		},
		props: {
			companyId: String,
		},
		mounted() {
			// if(this.companyId) {
			// 	this.getDeptDataNew(this.companyId)
			// } else {
			// 	this.getDeptData()
			// }
			console.log('this.companyId', this.companyId)
			this.getDeptData()
		},
		methods: {
			getDeptData() {
				if (this.companyId) {
					this.getDeptDataNew(this.companyId)
				} else {
					this.deptLoading = true

					this.$http.get('/sys/sysDepart/queryTreeList').then((res) => {
						if (res.data.success) {
							console.log('getDeptData', res.data)
							this.dataTree = res.data.result
							this.deptLoading = false
						}
					})
				}



			},
			getDeptDataNew(item) {
				this.deptLoading = true
				let params = {};
				if (item != '' && item != '') {
					params = {
						company: item
					}
				}
				this.$http.get('/sys/sysDepart/queryTreeListTileChangeTree', {
					params: params
				}).then((res) => {
					if (res.data.success) {
						console.log('getDeptDataNew', res.data)
						this.dataTree = res.data.result.tree
						this.deptLoading = false
					}
				})
			},
			onnodeclick(e) {
				console.log('eee', e);
				if (e.orgCategory == 5) {
					this.selectDeptObj.workshop = e.title
				} else if (e.orgCategory == 7) {
					this.selectDeptObj.classification = e.title
				} else if (e.orgCategory == 6) {
					this.selectDeptObj.classes = e.title
				} else if (e.orgCategory == 3) {
					this.selectDeptObj.post = e.title
					this.selectDeptObj.freightBasis = e.freightBasis
					this.selectDeptObj.postType = e.postType
				} else if (e.orgCategory == 1) {
					this.selectDeptObj.company = e.title
					this.selectDeptObj.companyId = e.id
				}
			},
			onpopupopened(e) {
				console.log('popupopened', this.companyId);
			},
			onpopupclosed(e) {
				console.log('popupclosed', this.companyId);
			},
			clear() {

			},
			onchange(e) {
				console.log('onchange:', e);
				console.log(1231312312313)
				console.log(this.classes)
				console.log(this.selectDeptObj)
				this.$emit('input', e.detail.value);
				this.$emit('changeDept', e.detail.value.length > 0 ? this.selectDeptObj : {})
				this.$emit('getDeptIds', e.detail.value.length > 0 ? e.detail.value : {})
			},
			setDataValue(value) {
				this.classes = value
			}
		}
	}
</script>

<style>
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	/deep/ .input-value-border[data-v-3ed22fe0] {
		border: 0;
		border-radius: 5px;
	}

	/deep/ .placeholder[data-v-3ed22fe0] {
		color: #666666;
		font-size: 14px;
	}

	/deep/ .input-arrow[data-v-3ed22fe0] {
		width: 7px;
		height: 7px;
		margin-top: 3px;
		margin-right: 7px;
		border-left: 0;
		border-top: 0;
		border-right: 1.5px solid #8799a3;
		border-bottom: 1.5px solid #8799a3;
	}

	/deep/ [data-v-205884dc] .input-value-border[data-v-3ed22fe0] {
		border: 0;
		border-radius: 5px;
		width: 300px;
	}
</style>